<template>
	<!-- 家政页面 -->
	<view class="duties">
		<view class="search">
		    <view class="search-box">
				<icon class="search-icon" type="search" size="20"></icon>
				<input class="search-input" type="text" placeholder="输入搜索内容"></input>
			</view>
		</view>
		<!-- tab -->
		<scroll-view scroll-x="true" class="wasteScroll" :scroll-into-view="scrollIntoIndex">
			<view class="slider" v-for="(item,index) in topbar" :key="index" @tap="changTab(index)" :id="'top'+index">
				<text class="duties-class" :class='tabbarIndex===index?"f-active-color":"f-color"'>{{item}}</text>
			</view>
		</scroll-view>
		<view class="duties-main">
			<view class="content">
				<view class="contentLeft">
					<view class="contentLeft-title">吉安鲸致到家家政服务·保洁清洗</view>
					<view class="contentLeft-text">这是一些介绍，关于我们工作的介绍...</view>
					<view class="label">
						<text class="biao">中央空调</text>
						<text class="biao">日常保洁</text>
						<text class="biao">洗衣机清洗</text>
						<text class="biao">水晶灯清洗</text>
					</view>
				</view>
				<view class="contentRight">
					<view class="contentImg">
						<image src="../../static/images/list/goodsList/chuifengji.jpg" mode="aspectFill"></image>
					</view>
					<view class="callPhone">
						<text class="icon iconfont icon-dianhua"></text>
						<text class="text">电话询问</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classList:"",//分类数据
				classId:"",//分类id
				topbar:["月嫂","保姆","家庭保洁","清洗工"],//头部导航栏列表
				tabbarIndex: -1, //选中的索引
				scrollIntoIndex: "top0", //顶栏跟随的索引id
			};
		},
		onLoad(e) {
			// console.log(e.classList)
			const classListString = decodeURIComponent(e.classList);
			console.log(JSON.parse(classListString))
			this.classList = JSON.parse(classListString)
			console.log(e.classId)
		},
		methods:{
			changTab(e) { //点击头部滑块切换
				// console.log(e)
				if (this.tabbarIndex === e) { //当前页
					return this.tabbarIndex = -1;
				}
				this.tabbarIndex = e
				this.scrollIntoIndex = "top" + e
			},
		},
	}
</script>

<style lang="scss" scoped>
.duties{
	// 头部搜索框
	.search{
		// border:1px solid #f00;
		background: #00b388;
		padding-top: 30rpx;
		height: 100rpx;
		.search-box {
		  display: flex;
		  align-items: center;
		  padding: 8rpx 20rpx;
		  box-sizing: border-box;
		  width: 95%;
		  // border: 1px solid #ccc;
		  background: #fff;
		  border-radius: 30rpx;
		  margin: 0 auto;
		  .search-icon {
		    margin-right: 10rpx;
		  }
		  .search-input {
		    flex: 1;
		    // height: 30px;
		    // border: none;
		    outline: none;
		  }
		}
	}
	// 顶部滑块
	.wasteScroll {
		width: 100%;
		// height: 80rpx;
		white-space: nowrap;
		// background: #fff;
		margin-top: 20rpx;
		// box-shadow: #e3e3e3 0 0 8px;
		.slider {
			box-sizing: border-box;
			display: inline-block;
			// border: 1px solid #000;
			// width: 200rpx;
			// text-align: center;
			padding: 10rpx 30rpx;
			font-size: 32rpx;
		}
		.duties-class{
			padding: 0 20rpx;
			display: inline-block;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			// border: 1px solid #f00;
			border-radius: 10rpx;
			box-sizing: border-box;
		}
		.f-active-color {
			color: #fff;
			background: #00b388;
		}
	
		.f-color {
			// color: #ccc;
			background: #fff;
			
		}
	
		// .scrollItem-left{
		// 	height:100%;
		// }
	}
	// 主体内容
	.duties-main{
		padding: 0 20rpx;
		.content{
			margin-top: 20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			display: flex;
			.contentLeft{
				width: 70%;
				margin-right: 20rpx;
				.contentLeft-title{
					font-size: 32rpx;
					font-weight: bold;
				}
				.contentLeft-text{
					margin-top: 20rpx;
					color: #818181;
					font-size: 25rpx;
				}
				.label{
					.biao{
						font-size: 26rpx;
						padding: 2rpx 6rpx;
						display: inline-block;
						margin-top: 15rpx;
						margin-right: 8rpx;
						border: 2rpx solid #e2e2e2;
						color: #cccccc;
					}
				}
			}
			.contentRight{
				width: 30%;
				.contentImg{
					width: 100%;
					height: 140rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
				.callPhone{
					padding: 10rpx 0;
					text-align: center;
					margin-top: 40rpx;
					align-items: center;
					border: #00b388 2rpx solid ;
					border-radius: 24rpx;
				}
			}
		}
	}
}
</style>
